<template>
	<view class="my-container">
		<!-- 顶部装饰 -->
		<view class="page-decoration">
			<view class="decoration-pattern"></view>
		</view>

		<!-- 用户信息区域 -->
		<view class="user-info-container">
			<view class="avatar-container">
				<image class="avatar" src="/static/uni.png" mode="aspectFill"></image>
				<view class="online-badge"></view>
			</view>
			<view class="user-details">
				<text class="username">{{ userInfo?.mobile || '未登录' }}</text>
			</view>
		</view>



     <!--   <view class="section-container">
			<view class="features-grid1">
				<view class="feature-item1">
					<view class="icon-wrapper">
					  111
					</view>
					<text class="feature-text">222</text>
				</view>
				<view class="feature-item1">
					<view class="icon-wrapper">
					  111
					</view>
					<text class="feature-text">222</text>
				</view>
				<view class="feature-item1">
					<view class="icon-wrapper">
					  111
					</view>
					<text class="feature-text">222</text>
				</view>
				<view class="feature-item1">
					<view class="icon-wrapper">
					  111
					</view>
					<text class="feature-text">222</text>
				</view>
			</view>
		</view> -->
		<!-- 功能中心区域 -->
		<view class="section-container">
		    <view class="features-grid1">
		       <view
		            v-for="(item, index) in gridList"
		            :key="index"
		            class="feature-item1"
		            @click="handleFeatureClick(index)"
		        >
		            <view class="icon-wrapper">
		                <uni-icons :type="item.icon" :size="32" color="#36CFC9" />
		            </view>
		            <text class="feature-text">{{ item.text }}</text>
		        </view>
		    </view>
		</view>

		<!-- 底部信息 -->
		<view class="footer">
			<text class="copyright">© 2025 智慧系统 版权所有</text>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
	computed: {
		...mapGetters('user', ['userInfo'])
	},
	data() {
		return {
			gridList: [
				{
					text: '产品信息',
					icon: 'list',
					path: '/pages/my/deviceCategory'
				},
				{
					text: '空间信息',
					icon: 'flag',
					path: '/pages/my/space'
				},
				{
					text: '功能信息',
					icon: 'star',
					path: '/pages/my/feature'
				},
				{
					text: '方案清单',
					icon: 'gift',
					path: '/pages/my/plan'
				}
			]
		}
	},
	async onLoad() {
		// 如果用户已登录但userInfo为空，则尝试获取用户信息
		if (this.$store.getters['user/isAuthenticated'] && !this.userInfo) {
			try {
				const userInfoResponse = await this.$store.dispatch('user/getUserInfo')
				this.$store.commit('user/setUserInfo', userInfoResponse.data)
			} catch (error) {
				console.error('获取用户信息失败:', error)
			}
		}
		
		// 页面加载动画效果
		this.$nextTick(() => {
			setTimeout(() => {
				const userInfo = document.querySelector('.user-info-container');
				const features = document.querySelectorAll('.feature-item');
				
				if (userInfo) {
					userInfo.style.opacity = '1';
					userInfo.style.transform = 'translateY(0)';
				}
				
				features.forEach((el, index) => {
					setTimeout(() => {
						el.style.opacity = '1';
						el.style.transform = 'translateY(0)';
					}, 100 * index);
				});
			}, 100);
		});
	},
	methods: {
		handleFeatureClick(index) {
			const item = this.gridList[index];
			if (item.path) {
				uni.navigateTo({ url: item.path });
			}
		}
	}
}
</script>

<style scoped>
/* 重置基础样式 */
.my-container {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 修复安卓flex布局问题 */
.my-container,
.user-info-container,
.features-grid {
	display: flex;
	flex-direction: column;
}

/* 顶部装饰样式 */
.page-decoration {
	width: 100%;
	height: 180px;
	background: linear-gradient(135deg, #36CFC9 0%, #6A11CB 100%);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	position: relative;
	overflow: hidden;
}

.decoration-pattern {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="8" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="30" r="12" fill="rgba(255,255,255,0.08)"/><circle cx="40" cy="70" r="15" fill="rgba(255,255,255,0.05)"/></svg>');
	background-size: 100px 100px;
}

/* 用户信息区域样式 */
.user-info-container {
	align-items: center;
	padding: 20px 15px;
	margin-top: -60px;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
	z-index: 2;
}

.avatar-container {
	width: 120px;
	height: 120px;
	border-radius: 60px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	position: relative;
}

.online-badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: #4cd964;
	border: 3px solid white;
}

.avatar {
	width: 100px;
	height: 100px;
	border-radius: 50px;
}

.user-details {
	text-align: center;
	margin-top: 15px;
}

.username {
	font-size: 20px;
	font-weight: bold;
	color: #333;
	display: block;
}

/* 功能区域样式 */
.section-container {
	background-color: #fff;
	border-radius: 16px;
	margin: 15px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	flex: 1;
}

.features-grid1 {
	display: flex;
	flex-wrap: wrap; /* 关键属性：允许换行 */
	justify-content: space-between;
     gap: 15px;  /* 项目之间的间距 */
}
        
.feature-item1 {
   width: calc(40% - 7.5px);  /* 计算宽度时考虑gap */
	display: flex;
	flex-direction: column;
	align-items: center;
/*  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
	padding: 25px 15px;
	border-radius: 10px;
	color: white;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



.icon-wrapper {
	width: 60px;
	height: 60px;
	background-color: #e6f7ff;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.feature-text {
	font-size: 14px;
	color: #333;
	text-align: center;
}

/* 底部样式 */
.footer {
	padding: 15px;
	background-color: #fff;
	border-top: 1px solid #eee;
	text-align: center;
}

.copyright {
	font-size: 12px;
	color: #999;
}

/* 安卓特定修复 */
@media screen and (max-width: 480px) {
	/* .user-info-container {
		margin-top: -50px;
	}
	
	.avatar-container {
		width: 100px;
		height: 100px;
	}
	
	.avatar {
		width: 85px;
		height: 85px;
	}
	
	.feature-item {
		width: 48%;
		padding: 15px 8px;
	}
	
	.icon-wrapper {
		width: 50px;
		height: 50px;
	}
	
	.feature-text {
		font-size: 13px;
	} */
}

/* 防止安卓上的点击闪烁 */
.feature-item {
/* 	-webkit-tap-highlight-color: transparent; */
}

/* 确保所有元素可见性 */
.user-info-container,
.feature-item {
	opacity: 1 !important;
/* 	transform: translateY(0) !important; */
}
</style>